/*
 * @Author: your name
 * @Date: 2021-12-08 13:35:11
 * @LastEditTime: 2021-12-09 13:54:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Vue\12.8webpack\webpack.config.js
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[hash].bundle.js",
    clean:true
  },
  plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin()
    ],
  mode:"development",
  module: {
    rules: [
      {
        test: /\.(scss|css|less|sass)$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          MiniCssExtractPlugin.loader,
        //   'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif|jfif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 30*1024,
            }
          },
        ],
       type: 'javascript/auto'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        use: [
          {
            loader: 'file-loader',
            options:{}
          },
        ],
      },
    ],
    
  },
  devServer:{
      host:'localhost',
      port:8080,
      open:true,
      hot:true,
      compress:true
  },
  //resolve是跟引入路径有关的配置项
  resolve: {
    //alias里面用来配置别名
    alias: {
      img: path.resolve(__dirname, 'src/assets/img/'),
      iconfont: path.resolve(__dirname, 'src/assets/iconfont/'),
      '@':path.join(__dirname,'./src/')
    },
    extensions: ['.js', '.json', '.wasm','.jpg'],
  },
  devtool:'source-map'
};
